<!-- 购物卡结佣管理-购物卡发货-->
<template>
    <div class="shoppingCardSend">
        <el-form :inline="true" :model="searchParams">
            <el-form-item label="单号：">
                <el-input v-model="searchParams.deliveryNo" placeholder="请输入发货单单号"></el-input>
            </el-form-item>
            <el-form-item label="楼盘：">
                <el-select
                        v-model="searchParams.devName"
                        placeholder="请输入楼盘名称"
                        filterable
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item,index) in allEstateList" :key="index" :label="item.devName" :value="item.devName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目收货人：">
                <el-input v-model="searchParams.projectConsignee" placeholder="请输项目收货人姓名"></el-input>
            </el-form-item>
            <el-form-item label="来源类别：">
                <el-select v-model="searchParams.sourceCategories" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="经纪人佣金" :value="0"></el-option>
                    <el-option label="经纪人奖励" :value="1"></el-option>
                    <el-option label="项目推荐奖" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作时间：">
                <el-date-picker
                        v-model="searchParams.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
                <el-button @click="onClear">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="mb20">
            <el-button type="primary" @click="goSendPage('new')">新建发货单</el-button>
        </div>
        <el-table :data="tableData" border @sort-change="sortChange" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="deliveryNo" label="单号"></el-table-column>
            <el-table-column align="center" prop="devName" label="所属楼盘"></el-table-column>
            <el-table-column align="center" prop="projectConsignee" label="项目收货人"></el-table-column>
            <el-table-column align="center" prop="totalAmount" label="购物卡金额">
                <template slot-scope="scope">￥{{scope.row.totalAmount | formatMoney}}</template>
            </el-table-column>
            <el-table-column align="center" prop="cardCount" label="数量"></el-table-column>
            <el-table-column align="center" prop="logisticsNo" label="物流单号"></el-table-column>
            <el-table-column align="center" prop="logisticsCompany" label="物流公司"></el-table-column>
            <el-table-column align="center" prop="deliveryTime" label="发货时间"></el-table-column>
            <el-table-column align="center" prop="sourceCategories" label="来源类别" :formatter="formatSourceCategories"></el-table-column>
            <el-table-column align="center" prop="creatorName" label="操作人"></el-table-column>
            <el-table-column align="center" prop="createTime" sortable="custom" label="操作时间"></el-table-column>
            <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                    <a href="javascript:;;" class="handleA" @click="goSendPage('detail', scope.row.id)">发货单详情</a>
                    <a href="javascript:;;" class="handleA" @click="goSendPage('print', scope.row.id)">打印</a>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog
                title="请先选择楼盘"
                :visible.sync="dialogVisible"
                width="400px">
            <div style="text-align: center;">
                楼盘：
                <el-select
                        v-model="selectDevValue"
                        placeholder="请输入楼盘名称"
                        filterable
                >
                    <el-option v-for="(item,index) in allEstateList" :key="index" :label="item.devName" :value="item.devId"></el-option>
                </el-select>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectDev">确 定</el-button>
            </span>
        </el-dialog>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'
    import utils from "@/common/utils.js";

    export default {
        name: 'shoppingCardSend',
        title:'购物卡发货',
        data() {
            return {
                searchParams: {
                    deliveryNo: "",
                    devName: "",
                    projectConsignee: "",
                    time: ["", ""],
                    sourceCategories: "",
                    sortFlag: "",
                },
                tableData: [],
                allEstateList: [],
                tableConfig: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 10
                },
                dialogVisible: false,
                selectDevValue: ""
            }
        },
        created() {
            this.queryAllEstate()
            this.getTableList()
        },
        activated(){
            this.onSearch()
        },
        mounted() {

        },
        methods: {
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getTableList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getTableList()
            },
            getTableList() {
                this.axios.post(api.deliveryOrderGetDeliveryOrderList, {
                    deliveryNo: this.searchParams.deliveryNo,
                    devName: this.searchParams.devName,
                    projectConsignee: this.searchParams.projectConsignee,
                    startTime: utils.getTimeString(this.searchParams.time[0]),
                    endTime: utils.getTimeString(this.searchParams.time[1]),
                    sourceCategories: this.searchParams.sourceCategories,
                    sortFlag: this.searchParams.sortFlag,
                    pageNum: this.tableConfig.pageNum,
                    pageSize: this.tableConfig.pageSize,
                }).then((res) => {
                    this.tableData = res.data.data.list;
                    this.tableConfig.totalSize = res.data.data.total;
                })
            },
            onSearch() {
                this.tableConfig.pageNum = 1;
                this.getTableList()
            },
            onClear() {
                this.searchParams = {
                    deliveryNo: "",
                    devName: "",
                    projectConsignee: "",
                    time: ["", ""],
                    sourceCategories: "",
                    sortFlag: "",
                };
            },
            sortChange(info) {
                if (info.order === 'descending') {
                    this.searchParams.sortFlag = 1
                } else if (info.order === "ascending") {
                    this.searchParams.sortFlag = 2
                } else {
                    this.searchParams.sortFlag = ""
                }
                this.getTableList()
            },
            goSendPage(type, id) {
                if (type === 'new') {
                    this.dialogVisible = true;
                } else {
                    this.$router.push({path: "./shoppingCardSendDetail", query: {type, id}})
                }
            },
            saveShoppingCardForm() {
                this.$refs["shoppingCardForm"].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            selectDev() {
                if (this.selectDevValue) {
                    this.axios.post(api.deliveryOrderGetShopCardList, {
                        devId: this.selectDevValue,
                        pageSize: 1,
                        pageNum: 1
                    }).then((res) => {
                        console.log(res);
                        if (res && res.data.code) {
                            this.$router.push({
                                path: "./shoppingCardSendNew",
                                query: {
                                    devId: this.selectDevValue,
                                    devName: this.allEstateList.find(item => item.devId === this.selectDevValue).devName
                                }
                            })
                        }
                    })

                } else {
                    this.$message({
                        message: '请先选择楼盘',
                        type: 'warning'
                    });
                    return false;
                }
            },
            queryAllEstate() {
                this.axios.post(api.queryAllEstateShoppingCardUse, {}).then((res) => {
                    this.allEstateList = res.data.data
                })
            },
            formatSourceCategories(row, column, cellValue) {
                return ["经纪人佣金", "经纪人奖励", "项目推荐奖"][cellValue]
            }
        },
        filters: {
            formatMoney(money) {
                return utils.formatMoney(money)
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
    .handleA {
        text-decoration: none;
    }

    .tips {
        color: #aaa;
    }
</style>

